<template>
  <ul class="card-tab">
    <li
      v-for="item in options"
      :key="item.tabValue"
      :value="activeName"
      class="card-tab__item"
      :class="activeName === item.tabName ?'is-active':''"
      @click="handleClick(item)"
    >
      <div v-for="(row,index) in item.data" :key="index" class="card-tab__item__body">
        <div class="card-tab__item__body__info">
          <p class="card-tab__item__body__info__label">{{ row.label }}</p>
          <p class="card-tab__item__body__info__value">{{ row.value }}</p>
        </div>
      </div>
    </li>
  </ul>
</template>
<script lang="ts" setup>
import { computed, type PropType } from 'vue';
defineOptions({
  name: 'CardTab'
});
// interface ColumnProps {
//   tabName: string;
//   tabValue: string | number;
//   data: any[] | Record<string, any>;
// }
const props = defineProps({
  activeTab: {
    type: [String, Number],
    default: ''
  },
  options: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
    required: true
  }
});
const emit = defineEmits(['handleClick', 'update:activeTab']);
const activeName = computed({
  get() {
    return props.activeTab;
  },
  set(value) {
    emit('update:activeTab', value);
  }
});

const handleClick = (item: Record<string, any>) => {
  activeName.value = item.tabName;
  emit('handleClick', item);
};
</script>
<style lang="scss" scoped>
.card-tab {
  width: 220px;

  &__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #fafafa;
    border-radius: 4px;

    &.is-active,
    &:hover {
      background: url('@images/kgj/bg-base-tab.png') no-repeat center top;

      .card-tab {
        &__item {
          &__body {
            &__info {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>

